<template>
	<view class="content">
		<image class="temple_detail_bgc" src="http://112.124.50.179:8888/imgs/home/zsh_bg.png" mode="aspectFill"></image>

		<view class="header">
			<view class="header_con">
				<view class="back" @click="back">
					<image src="http://112.124.50.179:8888/imgs/home/BACK.png" mode=""></image>
				</view>
				<view class="middle">
					<view class="header_imgList display_flex">
						<image src="http://112.124.50.179:8888/imgs/home/avater.jpg" mode="" v-for="(item, index) in familyList"></image>
					</view>
					<view class="header_num">20</view>
				</view>
				<view class="header_icon">
					<image src="http://112.124.50.179:8888/imgs/home/MUSIC.png" mode="" class="music"></image>
					<image src="http://112.124.50.179:8888/imgs/home/MORE_.png" mode="" @click="showMore"></image>
				</view>
			</view>
		</view>
		<view class="meeting_avater_list">
			<image src='http://112.124.50.179:8888/imgs/home/left_.png' mode="" class="left_"></image>
			<image src='http://112.124.50.179:8888/imgs/home/right_.png' mode="" class="right_"></image>
			<image src='http://112.124.50.179:8888/imgs/home/center_.png' mode="" class="center_"></image>
			<view class="meeting_avater" v-for="item,index in dataObj.peopleList||1">
				<image class="avater_border" src="http://112.124.50.179:8888/imgs/home/poster_border.png"></image>
				<image :src="item.imageUrl" mode="" class="deadee_avater"></image>
				<image src="http://112.124.50.179:8888/imgs/home/poster_top.png" mode="" class="decoration_top"></image>
				<image src="http://112.124.50.179:8888/imgs/home/poster_bottom.png" mode="" class="decoration_bottom"></image>
			</view>
		</view>

		<view class="table">
			<!-- 大桌 -->
			<view class="bigTable">
				<image class="bigTableImg" src="http://112.124.50.179:8888/imgs/home/bigTable.png" mode=''></image>
				<image class="flowList" src="http://112.124.50.179:8888/imgs/home/flowList.png"></image>
				<view class="flowList_">
					<image class="" src="http://112.124.50.179:8888/imgs/home/lh.png" v-for="item,index in 14"></image>
				</view>
			</view>
			<!-- 小桌 -->
			<view class="smallTable">
				<image class="smallTableImg" src="http://112.124.50.179:8888/imgs/home/smallTable.png" mode=""></image>
				<!-- 固定花 -->
				<view>
					<image class="flowList1" src="http://112.124.50.179:8888/imgs/home/flowList1.png"></image>
					<image class="flowList2" src="http://112.124.50.179:8888/imgs/home/flowList2.png"></image>
					<image class="flowList3" src="http://112.124.50.179:8888/imgs/home/flowList3.png"></image>
				</view>
				<view class="oblationList1">
					<image src="http://112.124.50.179:8888/imgs/home/lh.png" mode="" v-for="item,index in 7"></image>
				</view>
				<view class="oblationList2">
					<image src="http://112.124.50.179:8888/imgs/home/lh.png" mode="" v-for="item,index in 8"></image>
				</view>
				<view class="oblationList3">
					<image src="http://112.124.50.179:8888/imgs/home/lh.png" mode="" v-for="item,index in 9"></image>
				</view>
				<!-- 花圈3个及以下 -->
				<view class="huaquanList between">
					<image src="http://112.124.50.179:8888/imgs/home/huaquan1.png" mode=""></image>
					<image src="http://112.124.50.179:8888/imgs/home/huaquan2.png" mode=""></image>
					<image src="http://112.124.50.179:8888/imgs/home/huaquan3.png" mode=""></image>
				</view>
				<!-- 花圈4个 -->
				<view class="huaquanList_ ">
					<view class="left">
						<image src="http://112.124.50.179:8888/imgs/home/huaquan1.png" mode=""></image>
						<image src="http://112.124.50.179:8888/imgs/home/huaquan2.png" mode=""></image>
					</view>
					<view class="right">
						<image src="http://112.124.50.179:8888/imgs/home/huaquan3.png" mode=""></image>
						<image src="http://112.124.50.179:8888/imgs/home/huaquan3.png" mode=""></image>
					</view>
				</view>
			</view>

		</view>

		<view class="fixed">
			<Bubble :list='dataObj.offeringRecordList' :bgc='"rgba(14, 14, 14, 0.3)"' />
			<view class="fixed_con">
				<view class="fixed_con_" @click="">
					<image src="http://112.124.50.179:8888/imgs/home/meeting_pray.png" mode=""></image>
					<text>祈祷</text>
				</view>
				<view class="fixed_con_" @click="xingliRef.show = true">
					<image src="http://112.124.50.179:8888/imgs/home/temple_decorate_func4.png" mode=""></image>
					<text>行礼</text>
				</view>
				<view class="fixed_con_" @click="openOblation">
					<image src="http://112.124.50.179:8888/imgs/home/temple_decorate_func3.png" mode=""></image>
				</view>
				<view class="fixed_con_" @click="openLeaveMess">
					<image src="http://112.124.50.179:8888/imgs/home/temple_decorate_func1.png" mode=""></image>
					<text>留言</text>
				</view>
				<view class="fixed_con_" @click="goUrl('/subPages/home/memoryHall/life_story')">
					<image src="http://112.124.50.179:8888/imgs/home/meeting_life.png" mode=""></image>
					<text>生平</text>
				</view>
			</view>
		</view>
	</view>
	<u-popup :show="showMoreFunc" bgColor="rgba(0,0,0,0)" @close="closeMore" custom-style="padding:0 16rpx 0;">
		<view class="button_list">
			<u-button @click="goUrl('/subPages/home/memoryHall/Memorial')" shape="circle"
				:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0 }">
				供奉记录
			</u-button>
			<u-button shape="circle" :custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0 }">
				分享
			</u-button>
			<u-button shape="circle" :custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0 }"
				@click="goUrl('/subPages/chaoshan/report?reportType=8&&reportedId=' + reportedId)">
				举报
			</u-button>
		</view>

		<u-button shape="circle" :custom-style="{ ...moreBtnStyle, fontWeight: 600, borderRadius: '26rpx' }"
			@click="closeMore">
			取消
		</u-button>
	</u-popup>

	<!-- 送取祭品 -->
	<oblation ref="oblationRef" :offeringType='3' />

	<!-- 留言弹框 -->
	<leaveMess ref="leaveMessRef" />

	<!-- 添香油弹框 -->
	<addOil ref="addOilRef" />

	<!-- 行礼弹框 -->
	<xingli ref="xingliRef"></xingli>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onUnload,
		onLoad,
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import oblation from '@/subPages/common/oblation.vue';
	import leaveMess from '../common/leaveMess.vue';
	import addOil from '../common/addOil.vue';
	import xingli from '@/subPages/common/koubai.vue';
	import Bubble from "@/components/bubble/index.vue";
	import HomeApi from '@/API/home/index.js'
	const homeApi = new HomeApi();

	onLoad(() => {
		query()
	});
	onUnload(() => {
		if (uni.getStorageSync('memorialServiceId')) {
			uni.removeStorage({
				key: 'memorialServiceId'
			})
		}
	})
	const showMoreFunc = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};
	let reportedId = uni.getStorageSync('memorialServiceId')
	let height = ref('0');
	let navHeight = ref('0');
	let tabIndex = ref(0);
	const oblationRef = ref();
	const leaveMessRef = ref();
	const addOilRef = ref();
	const xingliRef = ref();
	const dataObj = ref({});
	const familyList = ref([1, 2, 3]); //家人列表，用于展示顶部头像
	const query = (() => {
		homeApi.getMemorialServiceInfoApi({
			memorialId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId
		}).then((res) => {
			dataObj.value = res.data
			uni.setStorageSync('memorialServiceId', res.data.memorialServiceId)
		})
	})
	/**
	 * 打开祭品弹框
	 */
	const openOblation = () => {
		oblationRef.value.show = true;
	};

	/**
	 * 打开留言弹框
	 */
	const openLeaveMess = () => {
		leaveMessRef.value.show = true;
	};

	const convertString = (string) => {
		return string.split('').reverse().join('');
	};

	const showMore = (item) => {
		showMoreFunc.value = true;
	};
	const closeMore = () => {
		showMoreFunc.value = false;
	};
	const setTab = (index) => {
		tabIndex.value = index;
	};
	const back = () => {
		uni.navigateBack({
			delta: 1
		});
	};
	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.music {
		animation: rotate 6s linear infinite;
	}

	page {
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		height: 100%;
		position: relative;
		// background-image: url('http://112.124.50.179:8888/imgs/home/metting_bgc2.png');
		// background-image: url('http://112.124.50.179:8888/imgs/home/zsh_bg.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: 100%;
		padding: 0 !important;
	}

	.header {
		/* #ifdef APP || H5 */
		height: 88rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 80rpx;
		/* #endif */
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 32rpx;
		box-sizing: border-box;

		.header_con {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.back {
				width: 64rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.middle {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.header_imgList {
					margin-right: 16rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: -20rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.header_num {
					height: 56rpx;
					background: rgba(14, 14, 14, 0.3);
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					padding: 0 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 56rpx;
				}
			}

			.header_icon {
				display: flex;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-left: 32rpx;
				}
			}
		}
	}

	.active {
		color: #fff !important;
	}

	.temple_detail_bgc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.meeting_avater_list {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 176rpx;
		position: relative;

		.left_ {
			width: 54rpx;
			height: 242rpx;
			position: absolute;
			left: 96rpx;
		}

		.right_ {
			width: 54rpx;
			height: 242rpx;
			position: absolute;
			right: 96rpx;
		}

		.center_ {
			width: 178rpx;
			height: 58rpx;
			position: absolute;
			top: -96rpx;
		}
	}

	.meeting_avater {
		position: relative;
		width: 212rpx;
		height: 272rpx;
		margin-right: 16rpx;

		&:last-child {
			margin-right: 0;
		}

		.avater_border {
			position: absolute;
			left: 0;
			top: 0;
			width: 212rpx;
			height: 272rpx;
			z-index: 2;
		}

		.deadee_avater {
			position: absolute;
			width: 190rpx;
			height: 250rpx;
			left: 10rpx;
			top: 10rpx;
			z-index: 1;
		}

		.decoration_top {
			width: 124rpx;
			height: 98rpx;
			position: absolute;
			top: -22rpx;
			right: -40rpx;
			z-index: 2;
		}

		.decoration_bottom {
			width: 148rpx;
			height: 140rpx;
			position: absolute;
			bottom: -24rpx;
			left: -32rpx;
			z-index: 2;
		}


	}

	.fixed {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom));
		bottom: calc(env(safe-area-inset-bottom));
		left: 0;
		right: 0;
		padding: 32rpx;
		z-index: 50;

		@media screen and (min-width: 992px) {
			width: 828rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}



		.fixed_con {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: nowrap;
			height: 144rpx;

			.fixed_con_ {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				text {
					color: #fff;
					font-size: 28rpx;
					font-weight: Medium;
					position: absolute;
					bottom: 10rpx;
				}
			}

			image {
				width: 144rpx;
				height: 144rpx;
			}
		}
	}

	.button_list {
		width: 100%;
		border-radius: 26rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		opacity: 0.8;
	}

	.table {
		margin-top: 32rpx;
	}

	.bigTable {
		width: 100%;
		height: 350rpx;
		position: relative;

		.bigTableImg {
			width: 100%;
			height: 100%;
		}

		.flowList {
			width: 704rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			height: 92rpx;
		}

		.flowList_ {
			position: absolute;
			z-index: 9999;
			top: 60rpx;
			display: flex;
			width: 100%;
			justify-content: center;

			image {
				margin-right: 4rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
	}


	.smallTable {
		position: relative;
		bottom: 200rpx;

		.smallTableImg {
			width: 510rpx;
			height: 206rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.flowList1 {
			width: 100%;
			height: 154.35rpx;
			position: absolute;
			top: 80rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.flowList2 {
			position: absolute;
			width: 296rpx;
			height: 80rpx;
			left: 50%;
			top: -20rpx;
			z-index: 999;
			transform: translateX(-50%);
		}

		.flowList3 {
			position: absolute;
			top: 170rpx;
			width: 690rpx;
			height: 88rpx;
			z-index: 999;
			left: 50%;
			transform: translateX(-50%);
		}

		.oblationList1 {
			position: absolute;
			display: flex;
			width: 100%;
			justify-content: center;
			top: -25rpx;
			z-index: 999;

			image {
				margin-right: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.oblationList2 {
			position: absolute;
			display: flex;
			width: 100%;
			justify-content: center;
			top: 0rpx;
			z-index: 999;

			image {
				margin-right: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.oblationList3 {
			position: absolute;
			display: flex;
			width: 100%;
			justify-content: center;
			top: 25rpx;
			z-index: 999;

			image {
				margin-right: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.huaquanList {
			padding: 0 32rpx;
			position: absolute;
			top: 90rpx;
			z-index: 1000;
			box-sizing: border-box;

			image {
				width: 180rpx;
				height: 214rpx;
			}
		}

		.huaquanList_ {
			padding: 0 32rpx;
			position: absolute;
			top: 100rpx;
			z-index: 1000;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;

			view {
				display: flex;

				image {
					width: 180rpx;
					height: 214rpx;
				}
			}

			.left {
				image:nth-child(1) {
					top: 90rpx;
					z-index: 9999;
				}

				image:nth-child(2) {
					right: 70rpx;
				}
			}

			.right {
				image:nth-child(1) {
					left: 70rpx;
				}

				image:nth-child(2) {
					top: 90rpx;
					z-index: 9999;
				}
			}




		}
	}

	.between {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
</style>